<template>
	<view class="my-order">
		<view class="search-bar">
			<uni-search-bar @confirm="goSearch" @input="myInput" />
		</view>
		<view class="tab-bar">
			<text :class="currentIndex==0?'active':''" @click="changeTab(0)">全部</text>
			<text :class="currentIndex==1?'active':''" @click="changeTab(1)">可使用</text>
			<text :class="currentIndex==2?'active':''" @click="changeTab(2)">已核销</text>
			<text :class="currentIndex==3?'active':''" @click="changeTab(3)">已过期</text>
			<text :class="currentIndex==4?'active':''" @click="changeTab(4)">系统取消</text>
		</view>
		<view class="content">
			<!-- <block v-for="(item,index) in orderList" :key="item.id">
				<view class="" v-if="currentIndex==index">
					<OrderContent v-for="item in orderList" :key="item.id" :username="item.username" :date="item.date" :type="item.type" :id="item.id" @update="update"></OrderContent>
				</view>
			</block> -->
			<view class="" v-if="currentIndex==0">
				<OrderContent v-for="item in orderList" :key="item.id" :username="item.username" :date="item.date" :time="item.time" :phone="item.phone" :status="item.status" :ids="item.id" @update="update"></OrderContent>
			</view>
			<view class="" v-if="currentIndex==1">
				<OrderContent v-for="item in usingList" :key="item.id" :username="item.username" :date="item.date" :time="item.time" :phone="item.phone" :status="item.status" :ids="item.id" @update="update"></OrderContent>
			</view>
			<view class="" v-if="currentIndex==2">
				<OrderContent v-for="item in checkedList" :key="item.id" :username="item.username" :date="item.date" :time="item.time" :phone="item.phone" :status="item.status" :ids="item.id" @update="update"></OrderContent>
			</view>
			<view class="" v-if="currentIndex==3">
				<OrderContent v-for="item in doneList" :key="item.id" :username="item.username" :date="item.date" :time="item.time" :phone="item.phone" :status="item.status" :ids="item.id" @update="update"></OrderContent>
			</view>
			<view class="" v-if="currentIndex==4">
				<OrderContent v-for="item in cancelList" :key="item.id" :username="item.username" :date="item.date" :time="item.time" :phone="item.phone" :status="item.status" :ids="item.id" @update="update"></OrderContent>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { GetOrderList,GetOrderListByKeywords } from '../../api/index.js'
	export default {
		data() {
			return {
				currentIndex:0,
				orderList:[],
				usingList:[],
				checkedList:[],
				doneList:[],
				cancelList:[],
				list:[],
				order:[],
				inputValue:''
				
			};
		},
		onLoad(options) {
			this.getOrderList()
			if(options){
				// this.currentIndex = options.currentIndex
				this.changeTab(options.currentIndex)
			}
			
			
			
			
		},
		// watch:{
		// 	list:{
		// 		handler:function(n,o){
		// 			// this.list = this.orderList.filter(item=>item.type == this.currentIndex)
		// 			console.log(n,o,'555')
		// 		},
		// 		immediate:true
		// 	}
		// },
		computed:{
			// li(){
			// 	return this.orderList.filter(item=>item.type == this.currentIndex)
			// }
		},
		methods:{
			async goSearch(v){
				console.log(v,'9')
				const { data:res } = await GetOrderListByKeywords(v.value)
				console.log(res,'resaaa')
				this.orderList = res.data
				this.currentIndex = 0
			},
			myInput(value){
				console.log(value)
				this.inputValue = value
				if(!value){
					this.getOrderList()
				}
				
			},
			changeTab(index){
				this.currentIndex = index
				// this.getOrderList()
				// this.list = [...this.orderList]
				// console.log(this.list,'lists')
				// this.list=this.list.filter(item=>item.type == this.currentIndex)
				// this.orderList=this.getData(index)
				// this.orderList = [...this.list]
				// this.orderList = this.list.filter(item=>item.type == this.currentIndex)
				if(this.currentIndex==0){
					this.orderList = this.list
				}
				if(this.currentIndex==1){
					this.usingList = this.list?.filter(item=>item.status == this.currentIndex)
				}
				if(this.currentIndex==2){
					this.checkedList = this.list?.filter(item=>item.status == this.currentIndex)
				}
				if(this.currentIndex==3){
					this.doneList = this.list?.filter(item=>item.status == this.currentIndex)
				}
				if(this.currentIndex==4){
					this.cancelList = this.list?.filter(item=>item.status == this.currentIndex)
				}
			},
			// getData(i){
			// 	return this.orderList.filter(item=>item.type == i)
			// },
			async getOrderList(){
				const { data:res } = await GetOrderList(1)
				console.log(res,'orderlist')
				// res.data = res.data.filter(item=>item.type == this.currentIndex)
				this.orderList = res.data
				this.list =res.data
			},
			update(){
				console.log('up')
				this.getOrderList()
			}
		}
	}
</script>

<style lang="scss">
.my-order{
	width: 100%;
	.tab-bar{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		box-sizing: border-box;
		.active{
			color:'green';
			// padding-bottom: 10rpx;
			line-height: 70rpx;
			border-bottom: 3px solid lawngreen;
			box-sizing: border-box;
		}
	}
	.content{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
		// text-align: center;
		margin: 0 auto;
		.card{
			width: 90%;
			background: #fff;
		}
	}
}
</style>
